<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>12.切角效果</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <script>
  /*
    难题：制作切角效果

    一、利用渐变：渐变可以接受一个角度（比如 45deg）作为方向
    
      1. 一个切角

        background: linear-gradient(-45deg, transparent 15px, #58a 0);

      2. 两个切角
        把 background-repeat 关掉，不然渐变会相互覆盖

        .div2 {
          background: linear-gradient(-45deg, transparent 15px, #58a 0) right, 
            linear-gradient(45deg, transparent 15px, #655 0) left; 
          background-size: 50% 100%; 
          background-repeat: no-repeat;
        }

      3. 四个切角

        background: linear-gradient(135deg, transparent 15px, #58a 0) top left,
          linear-gradient(...) top right, linear-gradient(...) bottom right, linear-gradient(...) bottom left;
        background-size: 50% 50%;
        background-repeat: no-repeat;

      4. sass 代码

        @mixin beveled-corners($bg, $tl:0, $tr:$tl, $br:$tl, $bl:$tr) { 
          background: $bg;
          background:linear-gradient(135deg, transparent $tl, $bg 0) top left, 
            linear-gradient(225deg, transparent $tr, $bg 0) top right, 
            linear-gradient(-45deg, transparent $br, $bg 0) bottom right, 
            linear-gradient(45deg, transparent $bl, $bg 0) bottom left; 
          background-size: 50% 50%; 
          background-repeat: no-repeat; 
        }
        // 调用，可传 2~5 个参数
        @include beveled-corners(#58a, 15px, 5px);
    
    二、弧形切角
      
      1. 用径向渐变来替代上述线性渐变

        background: radial-gradient(circle at top left, transparent 15px, #58a 0) top left, 
          radial-gradient(...) top right, radial-gradient(...) bottom right, radial-gradient(...) bottom left;
        background-size: 50% 50%;
        background-repeat: no-repeat;

    三、内联 SVG 与 border-image 方案

      1. 定义 border-image

        border-image: 1 url('data:image/svg+xml, \
          <svg xmlns="http://www.w3.org/2000/svg" width="3" height="3" fill="%2358a" > \
            <polygon points="0,1 1,0 2,0 3,1 3,2 2,3 1,3 0,2" /> \
          </svg>');
        background-clip: padding-box;

    四、裁切路径方案

      1. 利用 clip-path 属性
      
        clip-path: polygon(20px 0, calc(100% - 20px) ...
  
  */
  </script>

  <style>
    .div1 {
      max-width: 12em;
      min-height: 6em;
      background: #58a; /* 退回版本 */
      background: linear-gradient(-45deg, transparent 15px, #58a 0);
    }

    .div2 {
      max-width: 12em;
      min-height: 6em;
      background: #58a;
      background: linear-gradient(-45deg, transparent 15px, #58a 0) right, 
        linear-gradient(45deg, transparent 15px, #655 0) left; 
      background-size: 50% 100%; 
      background-repeat: no-repeat;
    }

    .div3 {
      max-width: 12em;
      min-height: 6em;
	    background: #58a;
      background: linear-gradient(135deg, transparent 15px, #58a 0) top left,
        linear-gradient(-135deg, transparent 15px, #58a 0) top right,
        linear-gradient(-45deg, transparent 15px, #58a 0) bottom right,
        linear-gradient(45deg, transparent 15px, #58a 0) bottom left;
      background-size: 50% 50%;
      background-repeat: no-repeat;
    }

    .div4 {
      max-width: 12em;
      min-height: 6em;
	    background: #58a;
      background: radial-gradient(circle at top left, transparent 15px, #58a 0) top left, 
        radial-gradient(circle at top right, transparent 15px, #58a 0) top right, 
        radial-gradient(circle at bottom right, transparent 15px, #58a 0) bottom right, 
        radial-gradient(circle at bottom left, transparent 15px, #58a 0) bottom left;
      background-size: 50% 50%;
      background-repeat: no-repeat;
    }

    .div5 {
      max-width: 12em;
      min-height: 6em;
      background: #58a; 
      border: 20px solid #58a;
      border-image: 1 url('data:image/svg+xml, \
        <svg xmlns="http://www.w3.org/2000/svg" width="3" height="3" fill="%2358a" > \
          <polygon points="0,1 1,0 2,0 3,1 3,2 2,3 1,3 0,2" /> \
        </svg>');
      background-clip: padding-box;
    }

    .div6 {
      max-width: 12em;
      min-height: 6em;
      background: #58a; 
      -webkit-clip-path: polygon(20px 0, calc(100% - 20px) 0, 100% 20px, 100% calc(100% - 20px),
		    calc(100% - 20px) 100%, 20px 100%, 0 calc(100% - 20px), 0 20px);
	    clip-path: polygon(20px 0, calc(100% - 20px) 0, 100% 20px, 100% calc(100% - 20px),
	 		  calc(100% - 20px) 100%, 20px 100%, 0 calc(100% - 20px), 0 20px);
    }
  
  </style>
</head>
<body>
  <div class="div1">渐变制作切角</div>
  <br />
  <div class="div2">两个切角</div>
  <br />
  <div class="div3">四个切角</div>
  <br />
  <div class="div4">弧形切角</div>
  <br />
  <div class="div5">svg 切角</div>
  <br />
  <div class="div6">裁切路径</div>
</body>
</html>